@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

*
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body
{
    font-family: 'Anton', sans-serif;
}
header 
{
    width: 100%;
  background-color:#5f2c3e; 
}
header .container{
    display: flex;
   align-items: center;
}
header .logo
{
    margin-right: 450px;
    width: 5%; 
}
header .logo h1
{
    color: #d1adcc;
}
header .nav 
{   
    text-align: center;
padding-bottom: 10 px;
}
 header .nav  ul
{
    list-style-type: none;
    text-align: center;
}
header .nav ul a
{
    text-decoration: none;
    color:#f6e9d7; 
}
header .nav ul li {
    display: inline;
    margin-right: 20px;
    cursor:pointer;
   
}
header .nav ul li a:hover
{
    color: black;   
}
.section .bg
{
    padding: 20px;
    text-align: center;
}
.section .bg h1
{
     padding-top:10px ;
    padding-bottom: 30px;  
    text-align: center;    
}
.section  .card {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section  .card .cards1 h1
{
  text-align: center;  
  color: rgb(236, 228, 228);
}
.section .card .cards1:hover
{
    transform: scale(1.1);
}
.section    .card .cards1
{
    
        width: 28%;
        background-color: rgba(10, 10, 10, 0.877);
        color: f6e9d7;
        padding-bottom: 10px;
        border: 0.1px solid rgb(5, 5, 5);
        animation-name: frame;
        animation-duration: 1s;

    }
    @keyframes frame {
        from
        {
            transform: scale(0.5);
        }
        to
        {
            transform: scale(1);
        }
            }
            .section .bg
{
    padding-top:40px;
    text-align: center;
    
}
footer .container
{
    text-align: center;
    padding-bottom: 30px;
    padding-top: 40px;
    background-color: #5f2c3e; 
    transition: all;
    transition-duration: 0.2s; 
}
footer
{
    padding-top: 50px; 
}

 footer .container, .bg, .bg1, .bg2, .bg3
{   
    text-align: center;
padding-bottom: 10 px;
} 
 footer .container, .bg ul li, .bg1 ul li, .bg2  ul li, .bg3 ul li

{
    list-style-type: none;
    text-align: center; 
    color:#f6e9d7; 
    font-size:smaller;
    display:flex;  
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    

 }
footer .container .bg h1
{
    font-size: 30px;
}
footer .container .bg1 h2
{
    font-size: 30px;
    padding-top: 20px;
}
footer .container .bg2 h3
{
    font-size: 30px;
}
footer .container .bg3 h4
{
    font-size: 30px;
    padding-top: 20px;
    text-align: left;
}
footer .container .bg ul li
{
    font-size: 15px;
    cursor:pointer;
 
}
footer .container .bg1 ul li
{
    font-size: 15px;
    cursor:pointer;
    
}
footer .container .bg2 ul li 
{
    font-size: 15px;
    cursor:pointer;
}
footer .container .bg3 ul li 
{
    font-size: 15px;
    cursor:pointer;
}
footer .container .bg1 ul li  a
{
    
    margin-left: auto;
}

footer .container .bg ul li  a
{
    
margin-left: auto;
}
footer .container .bg2 ul li  a
{
    
margin-left: auto;
}
footer .container .bg3 ul li  a
{
    
margin-left: auto;
}
 footer .container  .bg2 ul li:hover {
    color: black;
    transform: translateX(10px);
} 
footer .container  .bg ul li:hover {
    color: black;
    transform: translateX(10px);
}
footer .container  .bg1 ul li:hover {
    color: black;
    transform: translateX(10px);
}
footer .container  .bg3 ul li:hover {
    color: black;
    transform: translateX(10px);
}

/* footer .container, .bg, .bg1,.bg2 ul li {
    display: inline;
    margin-right: 20px;
}   */
  /* footer .container .bg, .bg1, .bg2
{
     display: grid;
    grid-template-columns: repeat(3,1fr); 
} */